<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色选择器</title>
    <style>
        #colorPickerContainer {
            width: 300px;
            margin: 20px auto;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        #colorDisplay {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin-bottom: 10px;
        }

        #colorPalette {
            width: 100%;
            height: 20px;
            position: relative;
            border: 1px solid #ccc;
            background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
        }

        #colorSlider {
            width: 10px;
            height: 22px;
            position: absolute;
            top: -1px;
            left: 0;
            background-color: #fff;
            border: 1px solid #000;
            cursor: ew-resize;
        }

        #colorInput {
            width: 100%;
            padding: 5px;
            margin-top: 10px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="colorPickerContainer">
        <div id="colorDisplay"></div>
        <div id="colorPalette">
            <div id="colorSlider"></div>
        </div>
        <input type="text" id="colorInput" placeholder="输入颜色代码">
    </div>
    <canvas id="canvas1" width="100" height="100"></canvas>
    <script>
        const colorDisplay = document.getElementById('colorDisplay');
        const colorPalette = document.getElementById('colorPalette');
        const colorSlider = document.getElementById('colorSlider');
        const colorInput = document.getElementById('colorInput');

        let isDragging = false;

        colorSlider.addEventListener('mousedown', function (e) {
            isDragging = true;
            updateColor(e);
        });

        document.addEventListener('mousemove', function (e) {
            if (isDragging) {
                updateColor(e);
            }
        });

        document.addEventListener('mouseup', function () {
            isDragging = false;
        });

        colorPalette.addEventListener('click', function (e) {
            updateColor(e);
        });

        function updateColor(e) {
            const rect = colorPalette.getBoundingClientRect();
            const x = e.clientX - rect.left;

            if (x >= 0 && x <= colorPalette.offsetWidth) {
                const color = getColorAtPosition(x);
                updateColorDisplay(color);
                colorSlider.style.left = `${x - 5}px`; // Adjust for slider width
            }
        }

        function getColorAtPosition(x) {
            const imgData = new ImageData(1, 1);
            // const canvas = document.createElement('canvas');
            const canvas = document.querySelector('#canvas1');
            const ctx = canvas.getContext('2d');
            canvas.width = colorPalette.offsetWidth;
            canvas.height = colorPalette.offsetHeight;
            ctx.fillStyle = colorPalette.style.background;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.getImageData(x, 0, 1, 1).data;
            const imageData = ctx.getImageData(x, 0, 1, 1).data;
            return `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`;
        }

        // 更新颜色显示
        function updateColorDisplay(color) {
            colorDisplay.style.backgroundColor = color;
            colorInput.value = color;
        }

        // 监听输入框输入事件
        colorInput.addEventListener('input', function () {
            const color = colorInput.value;
            if (isValidColor(color)) {
                updateColorDisplay(color);
            }
        });

        // 验证颜色代码是否有效
        function isValidColor(color) {
            const s = new Option().style;
            s.color = color;
            return s.color !== '';
        }
    </script>
</body>

</html>